<template>
  <div class="ai-question-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-content">
        <el-button @click="goBack" type="text" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>AI健康助手</h2>
        <div></div>
      </div>
    </div>

    <!-- 聊天 -->
    <div class="chat-container">
      <div class="chat-messages" ref="chatMessagesRef">
        <!-- 欢迎消息 -->
        <div class="message bot-message">
          <div class="message-avatar">
            <el-avatar :size="40" :style="{ backgroundColor: '#409EFF', color: 'white' }">
              AI
            </el-avatar>
          </div>
          <div class="message-content">
            <div class="message-text">
              您好！我是您的AI健康助手，可以为您提供健康咨询和建议。请告诉我您的问题，我会尽力帮助您。
            </div>
            <div class="message-time">{{ getCurrentTime() }}</div>
          </div>
        </div>

        <!-- 用户消息 -->
        <div 
          v-for="(message, index) in messages" 
          :key="index"
          class="message"
          :class="message.type === 'user' ? 'user-message' : 'bot-message'"
        >
          <div class="message-avatar" v-if="message.type === 'bot'">
            <el-avatar :size="40" :style="{ backgroundColor: '#409EFF', color: 'white' }">
              AI
            </el-avatar>
          </div>
          <div class="message-content">
            <div class="message-text">{{ message.text }}</div>
            <div class="message-time">{{ message.time }}</div>
          </div>
          <div class="message-avatar" v-if="message.type === 'user'">
            <el-avatar :size="40" :style="{ backgroundColor: '#409EFF', color: 'white' }">
              {{ currentUser?.name?.charAt(0) || 'U' }}
            </el-avatar>
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="message bot-message">
          <div class="message-avatar">
            <el-avatar :size="40" :style="{ backgroundColor: '#409EFF', color: 'white' }">
              AI
            </el-avatar>
          </div>
          <div class="message-content">
            <div class="message-text">
              <el-icon class="is-loading"><Loading /></el-icon>
              正在思考中...
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input">
        <el-input
          v-model="inputMessage"
          placeholder="请输入您的问题..."
          :disabled="loading"
          @keyup.enter="sendMessage"
        >
          <template #append>
            <el-button 
              type="primary" 
              @click="sendMessage"
              :loading="loading"
              :disabled="!inputMessage.trim()"
            >
              发送
            </el-button>
          </template>
        </el-input>
      </div>

      <!-- 快捷问题 -->
      <div class="quick-questions">
        <h4>常见问题：</h4>
        <div class="question-tags">
          <el-tag 
            v-for="question in quickQuestions" 
            :key="question"
            @click="askQuickQuestion(question)"
            class="question-tag"
          >
            {{ question }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { aiQuestion } from '../utils/aiApi'

export default {
  name: 'AIQuestion',
  setup() {
    const router = useRouter()
    const messages = ref([])
    const inputMessage = ref('')
    const loading = ref(false)
    const chatMessagesRef = ref()
    const currentUser = ref(null)

    // 获取当前用户信息
    const userStr = localStorage.getItem('user')
    if (userStr) {
      currentUser.value = JSON.parse(userStr)
    }



    // 快捷问题
    const quickQuestions = [
      '高血压患者应该注意什么？',
      '感冒发烧应该怎么办？',
      '如何预防糖尿病？',
      '春季养生有什么建议？',
      '如何保持心理健康？'
    ]

    // 获取当前时间
    const getCurrentTime = () => {
      return new Date().toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    }

    // 滚动到底部
    const scrollToBottom = () => {
      nextTick(() => {
        if (chatMessagesRef.value) {
          chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
        }
      })
    }

    // 发送消息
    const sendMessage = async () => {
      if (!inputMessage.value.trim() || loading.value) return

      const userMessage = {
        type: 'user',
        text: inputMessage.value,
        time: getCurrentTime()
      }

      messages.value.push(userMessage)
      const question = inputMessage.value
      inputMessage.value = ''
      loading.value = true

      scrollToBottom()

      try {
        const result = await aiQuestion(question)
        if (result.success) {
          const botMessage = {
            type: 'bot',
            text: result.data.answer,
            time: getCurrentTime()
          }
          messages.value.push(botMessage)
        } else {
          ElMessage.error(result.error || '获取回答失败，请重试')
        }
      } catch (error) {
        ElMessage.error('获取回答失败，请重试')
      } finally {
        loading.value = false
        scrollToBottom()
      }
    }

    // 快捷问题
    const askQuickQuestion = (question) => {
      inputMessage.value = question
      sendMessage()
    }

    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }

    onMounted(() => {
      scrollToBottom()
    })

    return {
      messages,
      inputMessage,
      loading,
      chatMessagesRef,
      currentUser,
      quickQuestions,
      getCurrentTime,
      sendMessage,
      askQuickQuestion,
      goBack
    }
  }
}
</script>

<style scoped>
.ai-question-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.back-btn .el-icon {
  margin-right: 5px;
}

.header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.chat-container {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: white;
  margin: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.bot-message {
  flex-direction: row;
}

.message-avatar {
  margin: 0 10px;
  flex-shrink: 0;
}

.message-content {
  max-width: 70%;
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 15px;
  position: relative;
}

.user-message .message-content {
  background: #409EFF;
  color: white;
}

.message-text {
  margin-bottom: 5px;
  line-height: 1.5;
  word-wrap: break-word;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
}

.user-message .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.chat-input {
  padding: 0 20px 20px;
  background: white;
  margin: 0 20px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-questions {
  padding: 0 20px 20px;
  background: white;
  margin: 0 20px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-questions h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.question-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .chat-container {
    height: calc(100vh - 60px);
  }
  
  .chat-messages {
    margin: 10px;
    padding: 15px;
  }
  
  .chat-input,
  .quick-questions {
    margin: 0 10px 10px;
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .question-tags {
    gap: 8px;
  }
}
</style> 